import React from 'react';
import {
  Button,
  Popconfirm,
  Space,
  Modal,
  Form,
  Input,
  InputNumber,
  Row,
  Col,
  message,
  Radio,
  DatePicker,
} from 'antd';
import { PlusOutlined, DeleteOutlined, FormOutlined } from '@ant-design/icons';
import TableCom from '../../../Component/tableCompoment/index';
import Cookie from 'js-cookie';
let time;
class menuManage extends React.Component {
  constructor(prop) {
    super(prop);
    this.state = {
      btnStyle: 'button-color-daybreak',
      tableData: [], //表格数据
      column: [
        {
          title: '菜单管理',
          dataIndex: 'menuName',
          key: 'menuName',
        },
        {
          title: '图标',
          dataIndex: 'menuIcon',
          key: 'menuIcon',
        },
        {
          title: '路径',
          dataIndex: 'menuPath',
          key: 'menuPath',
        },
        {
          title: '创建时间',
          dataIndex: 'insertTime',
          key: 'insertTime',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: (_, record) =>
            this.state.tableData.length >= 1 ? (
              <Space>
                <Popconfirm
                  cancelText="取消"
                  okText="确定"
                  title="确定删除此条数据吗?"
                  onConfirm={() => this.handleDelete(record.key)}
                >
                  <Button
                    icon={<DeleteOutlined />}
                    className={this.state.btnStyle + ' ' + 'button-noback'}
                  >
                    删除
                  </Button>
                </Popconfirm>
                <Button
                  onClick={this.handleEdit.bind(this, record)}
                  icon={<FormOutlined />}
                  className={this.state.btnStyle + ' ' + 'button-noback'}
                >
                  修改
                </Button>
              </Space>
            ) : null,
        },
      ], //表头
      top: 'none', //顶部是否有分页器及分页器位置
      bottom: 'bottomCenter', //底部是否有分页器及分页器位置
      visible: false, //modal框是否显示
      confirmLoading: false, //确定延时，异步回调
      Title: '', //modal标题
      layout: {
        //表单位置
        labelCol: { span: 10 },
        wrapperCol: { span: 16 },
      },
      isHasChild: true,
      initValue: {
        hasChild: '是',
      },
    };
  }
  // 删除数据
  handleDelete = val => {
    // val该条数据的key
    //这里写调用删除数据的接口
  };
  //修改数据
  handleEdit = (val, e) => {
    console.log(val);
    this.setState({
      Title: `修改${val.menuName}信息`,
      visible: true,
    });
  };
  //modal框确定
  handleOk = () => {
    console.log('确定');
    this.setState({
      visible: false,
    });
  };
  //modal取消
  handleCancel = () => {
    console.log('取消');
    this.setState({
      visible: false,
    });
  };
  //新增
  handleAdd = () => {
    this.setState({
      Title: `新增菜单`,
      visible: true,
    });
  };
  //渲染modal框里面的内容
  renderModal = () => {
    const { layout, initValue, isHasChild } = this.state;
    return (
      <>
        <Form {...layout} ref={this.formRef} initialValues={initValue}>
          <Row gutter={24}>
            <Col span="12">
              <Form.Item
                name="makeTicketTime"
                label="主菜单名称"
                rules={[
                  {
                    required: true,
                    message: '主菜单名称不能为空',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span="12">
              <Form.Item
                name="makeTicketMoney"
                label="主菜单图标"
                rules={[
                  {
                    required: true,
                    message: '主菜单图标不能为空',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span="12">
              <Form.Item name="rate" label="主菜单路径">
                <Input />
              </Form.Item>
            </Col>
            <Col span="12">
              <Form.Item name="hasChild" label="是否有子菜单">
                <Radio.Group onChange={this.radioChange}>
                  <Radio value="是">是</Radio>
                  <Radio value="否">否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          {isHasChild ? (
            <>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="makeTicketTime"
                    label="子菜单名称"
                    rules={[
                      {
                        required: true,
                        message: '子菜单名称不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="makeTicketMoney"
                    label="子菜单图标"
                    rules={[
                      {
                        required: true,
                        message: '主菜单图标不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item name="rate" label="子菜单路径">
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
            </>
          ) : (
            <></>
          )}
        </Form>
      </>
    );
  };
  //单选框选择变化时触发
  radioChange = val => {
    let isHasChild;
    let value = val.target.value;
    if (value === '是') isHasChild = true;
    else isHasChild = false;
    this.setState({
      isHasChild,
    });
  };
  render() {
    const { Title, visible, confirmLoading, column, tableData, top, bottom } = this.state;
    return (
      <>
        <div className="topOperation">
          <Button type="primary" onClick={this.handleAdd} icon={<PlusOutlined />}>
            新增
          </Button>
        </div>
        <div className="tableCont">
          <TableCom
            tableColumns={column}
            tableData={tableData}
            top={top}
            bottom={bottom}
            isSelect={true}
          ></TableCom>
        </div>
        <Modal
          okText={'确定'}
          cancelText={'取消'}
          title={Title}
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
        >
          {this.renderModal()}
        </Modal>
      </>
    );
  }
  componentDidMount() {
    let that = this;
    time = setInterval(function () {
      if (that.state.btnStyle !== Cookie.get('btnColor')) {
        that.setState({
          btnStyle: Cookie.get('btnColor'),
        });
      }
    }, 500);
    this.setState({
      btnStyle: Cookie.get('btnColor') || 'button-color-daybreak',
      tableData: [
        {
          key: 1,
          menuName: '系统管理',
          menuIcon: 'iconsousuo',
          menuPath: '',
          insertTime: '2021-2-23',
          children: [
            {
              key: 1,
              menuName: '人员管理',
              menuIcon: 'iconsousuo',
              menuPath: '/Main/System/personManage',
              insertTime: '2021-2-23',
            },
            {
              key: 2,
              menuName: '菜单管理',
              menuIcon: 'iconsousuo',
              menuPath: '/Main/System/menuManage',
              insertTime: '2021-2-23',
            },
          ],
        },
        {
          key: 2,
          menuName: '项目管理',
          menuIcon: 'iconsousuo',
          menuPath: '',
          insertTime: '2021-2-23',
          children: [
            {
              key: 3,
              menuName: '项目列表',
              menuIcon: 'iconsousuo',
              menuPath: '/Main/Project/projectList',
              insertTime: '2021-2-23',
            },
            {
              key: 4,
              menuName: '项目对账单',
              menuIcon: 'iconsousuo',
              menuPath: '/Main/Project/projectStatements',
              insertTime: '2021-2-23',
            },
          ],
        },
        {
          key: 3,
          menuName: '合同管理',
          menuIcon: 'iconsousuo',
          menuPath: '',
          insertTime: '2021-2-23',
          children: [
            {
              key: 5,
              menuName: '合同列表',
              menuIcon: 'iconsousuo',
              menuPath: '/Main/Contract/contractList',
              insertTime: '2021-2-23',
            },
          ],
        },
        {
          key: 4,
          menuName: '款项管理',
          menuIcon: 'iconsousuo',
          menuPath: '',
          insertTime: '2021-2-23',
          children: [
            {
              key: 6,
              menuName: '审批列表',
              menuIcon: 'iconsousuo',
              menuPath: '/Main/Payment/paymentList',
              insertTime: '2021-2-23',
            },
            {
              key: 7,
              menuName: '审批详情',
              menuIcon: 'iconsousuo',
              menuPath: '/Main/Payment/paymentDetail',
              insertTime: '2021-2-23',
            },
          ],
        },
      ],
    });
  }
  componentWillUnmount() {
    clearInterval(time);
  }
}
export default menuManage;
